import React, { useEffect, useState } from 'react';
import { Breadcrumb } from 'antd';
import Icon from '/@/components/icon';
import { useStateMenuList, useStateCurrentPath } from '/@/store/hooks/menu';
import { MenuList, MenuItem } from '/@/types/menu';
import { useStateThemeConfig } from '/@/store/hooks/theme';
import { t } from 'i18next';
import _ from 'lodash';
export default function Crumbs(props: { color?: string }) {
  const { color = 'var(--squidwest-color-fontsizecolor)' } = props;
  let { IsCrumbsIcon } = useStateThemeConfig();
  const [levelList, setlevelList] = useState<MenuList>();
  const pathname = useStateCurrentPath();
  //获取redux路由
  const routerList = useStateMenuList();
  const findDeepPath = (path: string, menus: MenuList) => {
    const result: MenuList = []; // 处理完所有的menu数据成为一个一维数组
    //铺平数组
    const findInfo = (arr: MenuList) => {
      arr.forEach((item: MenuItem) => {
        const { children, ...info } = item;
        result.push(info);
        if (children) {
          findInfo(children); // 递归处理子节点
        }
      });
    };
    findInfo(menus);

    // 根据当前传递的path值过滤数据，获取到当前用来显示的menu item数据
    const tmpData: MenuList = result.filter((item: MenuItem) => item.name && path.includes(item.path));
    if (tmpData.length > 0) {
      return [...tmpData];
    }
    return [];
  };
  const menusDeep = _.cloneDeep(routerList);
  //过滤路由
  const FilterRoute = (arr: any[]): any[] => {
    return arr.filter((v) => {
      if (v.children) {
        v.children = FilterRoute(v.children);
      }
      return !v?.LayoutHide;
    });
  };
  useEffect(() => {
    setlevelList(findDeepPath(pathname, FilterRoute(menusDeep)[0].children));
  }, [pathname]);

  return (
    <div style={{ marginLeft: '10px' }}>
      <Breadcrumb>
        {levelList &&
          levelList.map((item: MenuItem, index: number) => {
            return (
              <Breadcrumb.Item key={item.path}>
                {index == levelList.length - 1 ? (
                  <span style={{ color, opacity: '0.6' }}>
                    {IsCrumbsIcon && <Icon icon={item.icon} style={{ marginRight: '3px', fontSize: '13px' }}></Icon>}
                    {t(item.name as string)}
                  </span>
                ) : (
                  <a style={{ color }}>
                    {IsCrumbsIcon && <Icon icon={item.icon} style={{ marginRight: '3px', fontSize: '13px' }}></Icon>}
                    {t(item.name as string)}
                  </a>
                )}
              </Breadcrumb.Item>
            );
          })}
      </Breadcrumb>
    </div>
  );
}
